<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        事件流和两个阶段说明
            事件流指的是事件完整执行过程中的流动路径
            简单来说:捕获阶段是 从父到子  冒泡阶段是从子到父
            实际工作中都是使用事件冒泡为主
        事件捕获概念:
            从DOM的根元素开始去执行对应的事件(从外到里)
            事件捕获需要写对应代码才能看到效果
            代码:
                DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
            说明:
                addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)
                若传入false代表冒泡阶段触发,默认就是false
                若是用L0事件监听,则只有冒泡阶段,没有捕获

        事件冒泡:
            当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发,这一过程被称为事件冒泡
            简单理解:
                当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
        阻止事件冒泡:
            问题: 因为默认就有冒泡模式存在,所以容易导致事件影响到父级元素
            需求:若想把事件就限制在当前元素内,就需要阻止时间冒泡
            前提:阻止事件冒泡需要拿到事件对象
            语法:  
                事件对象.stopPropagation()
            注意:此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
        解绑事件:
            on事件方式,直接使用null覆盖就可以实现事件的解绑

            addEventListener方式必须使用:
                removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
                例如:
                btn.addEventListener('click',fn)
                btn.removeEventListener('click',fn)   
                注意:匿名函数无法关闭
        鼠标经过事件:
            mouseover 和 mouseout 会有冒泡效果
            mouseenter 和 mouseleave 没有冒泡效果(推荐)
     -->
</head>
<body>
    
</body>
</html>